<template>
	<view>
		<view class="search-wrap">
			<input type="text" value="" v-model="srerchIput" placeholder="请输入关键词"/>
			<view class="sousuoInput" @click="sousuoing">搜索</view>
		</view>
		
		<view class="bcgall">
			<view class="search-peo">
				<text class="search-title">试试搜索~</text>
				<view class="search-tuijian">
					<block v-for="(item,index) in ciList">
						<text @click="tabers(item.uname)">{{item.uname}}</text>
					</block>
				</view>
			</view>
		</view>
		<view v-if="shows" class="maxData">
			<text>最多只显示最近20条...</text>
		</view>
		
		<!-- 无数据显示 -->
		<view v-if="showsdata">
			<vue-kong></vue-kong>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showsdata:false,
				shows:false,
				srerchIput:'',
				ciList:[
					{
						"uname":'站主'
					},
					{
						"uname":'西安高新'
					},
					{
						"uname":'表白'
					},
					{
						"uname":'恋爱'
					},
					{
						"uname":'餐厅'
					},
					{
						"uname":'社团'
					}
				]
			}
		},
		methods:{
			sousuoing(){
				// console.log(this.srerchIput)
				let value = this.srerchIput
				if(value != ''){
					const db = wx.cloud.database()
					db.collection('textarea').where({
						textarea:db.RegExp({
							regexp:value,
							options:'m'
						})
					})
					.limit(20)
					.orderBy('time','desc')
					.get().then(res=>{
						console.log(res)
						if(res.data.length==0){
							this.shows=false
							this.showsdata = true
						}else{
							this.showsdata = false
						}
						let homeDatas = res.data
						this.$store.commit('srerchData',homeDatas)
						this.srerchIput = '';
					}).catch(err=>{
						console.log(err)
					})
				}else{
					console.log('请输入关键字')
				}
				
			},
			
			//tabers按钮点击搜索
			tabers(value){
				const db = wx.cloud.database()
				db.collection('textarea').where({
					textarea:db.RegExp({
						regexp:value,
						options:'m'
					})
				})
				.limit(20)
				.orderBy('time','desc')
				.get().then(res=>{
					console.log(res)
					if(res.data.length==0){
						this.shows=false
						this.showsdata = true
					}else{
						this.showsdata = false
					}
					let homeDatas = res.data
					this.$store.commit('srerchData',homeDatas)
					this.shows = true
				}).catch(err=>{
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.search-wrap{
		padding: 15upx;
		box-sizing: border-box;
		width: 100%;
		height: 117upx;
		background-image: linear-gradient(to top,#ffffff 5%,#1995e7 100%);
		display: flex;
		justify-content: space-around;
		align-items: center;
		input{
			padding: 5upx 20upx;
			width: 75%;
			height: 60upx;
			background-color: #f1f1f1;
			border-radius: 40upx;
		}
		input:hover{
			border: 1px solid #00ff00;
		}
		.sousuoInput{
			border: 1px solid #5353fa;
			color: #2f2f2f;
			font-size: 25upx;
			padding: 12upx 25upx;
			border-radius: 20upx;
			box-sizing: border-box;
			box-shadow: 0 0 15upx rgba(170, 85, 255, 0.5);
		}
	}
	
	.bcgall{
		background-color: #ffffff;
	}
	.search-peo{
		display: flex;
		flex-direction: column;
		justify-content: center;
		.search-title{
			font-weight: bold;
			font-size: 25upx;
			padding: 15upx;
			margin-left: 25upx;
		}
		.search-tuijian{
			display: flex;
			flex-wrap: wrap;
			margin: 15upx 20upx;
			text{
				padding: 15upx 30upx;
				border: 1px solid #007AFF;
				border-radius:15upx;
				margin: 15upx;
			}
			
		}
	}
	.maxData{
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			color: #55aaff;
			font-size: 32upx;
		}
	}
</style>
